<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/daily.css" />
	</head>

	<body>
		<div id="bar-cover" style="
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 20px;
				display: none;
				z-index: 100;
				background-image: url('img/bar-cover.png');
				background-color: rgba(255, 255,255, 0.9);
				background-repeat: repeat-x;
				background-size: contain;
		"></div>
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<div class="swiper-container" id="slider"></div>
				<div id="daily-content" style="margin-bottom: 50px;"></div>
			</div>
		</div>

		<!--
        	作者：jingxyy@qq.com
        	时间：2015-12-13
        	描述：首页顶部幻灯片的模板。
        -->
		<script id="slider-tpl" type="text/html">
			<div class="swiper-wrapper">
				{{ each sliders }}
				<div class="swiper-slide">
					<a href="#" data-role="{{ $value.type }}" data-id="{{ $value.id }}">
						<img src="{{ $value.cover }}!banner" style="min-height: {{ width*0.7 }}px;" />
					</a>
				</div>
				{{ /each }}
			</div>
			<div class="swiper-pagination"></div>
		</script>

		<!--
        	作者：jingxyy@qq.com
        	时间：2015-12-13
        	描述：每一天的老黄历以及精选话题列表
       -->
		<script id="daily-tpl" type="text/html">
			<div class="daily" data-date="">
				{{ if !is_today }}
				<div class="date">
					<p>{{ date_pattern1 }}</p>
				</div>
				{{ /if }}
				<div class="calendar">
					<div class="header">
						<p class="ch">饭盒老黄历</p>
						<p class="en">Fanhe old yellow li</p>
					</div>
					<img class="almanac_img" src="img/grey-back.png" data-src="{{ almanac }}" data-preview-src="{{ almanac }}" data-preview-group="5" style="min-height: {{ width*0.6 }}px;" onload="load(this)" />
					<div class="footer">
						<p class="ch">农历{{ date_lunar }}</p>
						<p class="num">{{ date_pattern2 }}</p>
						<img data-id="{{ almanac_id }}" class="share" src="img/share.png" />
						<div class="share-icons" data-id="{{ almanac_id }}">
							<div class="icon" data-id="sinaweibo" data-type="sinaweibo">
								<img src="img/share_weibo_new.png" />
								<p>微博</p>
							</div>
							<div class="icon" data-id="qq" data-type="qq">
								<img src="img/share_qq_new.png" />
								<p>QQ</p>
							</div>
							<div class="icon" data-id="weixin" data-type="weixin-timeline">
								<img src="img/share_timeline_new.png" />
								<p>朋友圈</p>
							</div>
							<div class="icon" data-id="weixin" data-type="weixin-session">
								<img src="img/share_weixin_new.png" />
								<p>微信</p>
							</div>
						</div>
						{{ if false }}
						<span class="pray"><p>求签</p><span class="value">{{ qian_count }}</span></span>
						{{ /if }}
					</div>
				</div>
				<hr />
				<div class="topics">
					<div class="header">
						<p class="ch">饭盒喵精选</p>
						<p class="en">Fanhe Miao's Select</p>
					</div>
					{{ each feeds }} {{ if $value.type == "topic" }}
					<div class="topic" data-role="topic" data-id="{{ $value.id }}">
						<div class="wraper">
							<div class="cover" style="min-height: {{ $value.width*9/16 }}px;">
								<img class="cover-img" src="img/grey-back.png" data-src="{{ $value.cover }}!pageCover" onload="load(this)" />
								<img class="topic-logo" src="img/topic_logo.png" />
								<img class="badge" src="{{ $value.badge }}" />
								<div class="info">
									<p class="name">{{ $value.name }}</p>
									<div class="rec"><span></span></div>
									<p class="description">{{ $value.description }}</p>
								</div>
							</div>
							<div class="count">
								<span class="value">{{ $value.frame_count }}</span>篇内容 <span class="seq">|</span> <span class="value">{{ $value.collection_count }}</span>人收藏
								<img class="right-arrow" src="img/icon-right-arrow.png" />
							</div>
						</div>
					</div>
					{{ /if }} 
					{{ if $value.type == "frame" }} 
					{{ if $value.style=='standard' }}
					<div class="frame standard" data-role="frame" data-id="{{ $value.id }}" data-cover="{{ $value.cover }}" data-name="{{ $value.title }}" data-author="{{ $value.meta_data.author }}" data-avatar="{{ $value.meta_data.avatarUrl }}">
						<div class="author" data-url="{{ $value.url }}">
							<p>
								<img src="{{ $value.meta_data.avatarUrl }}" data-src="{{ $value.meta_data.avatarUrl }}" />
								<span class="name">{{ $value.meta_data.author }}</span>
							</p>
						</div>
						<span class="img-count">{{ $value.imgs.length }}<img src="img/icon_img.png"/></span>
						<div class="cover" style="min-height: {{ $value.width*9/16 }}px;">
							{{ if $value.cover.match(/.*gif/g) }}
							<img src="img/grey-back.png" data-src="{{ $value.cover }}" onload="load(this)" /> 
							{{ else }}
							<img src="img/grey-back.png" data-src="{{ $value.cover }}!pageCover" onload="load(this)"/> 
							{{ /if }}
						</div>
						<div class="info" data-id="{{ $value.id }}">
							<p class="title">{{ $value.title }}</p>
							<div class="rect"><span></span></div>
							<div class="text">
								<p>{{ $value.text }}</p>
							</div>
						</div>
					</div>
					{{ else if $value.style=='card' }}
					<div class="frame card" data-id="{{ $value.id }}" data-cover="{{ $value.cover }}" data-name="{{ $value.title }}" data-author="{{ $value.meta_data.author }}" data-avatar="{{ $value.meta_data.avatarUrl }}" data-url="{{ $value.url }}">
						<div class="author" data-url="{{ $value.url }}">
							<p>
								<img src="{{ $value.meta_data.avatarUrl }}" data-src="{{ $value.meta_data.avatarUrl }}" />
								<span class="name">{{ $value.author }}</span>
							</p>
						</div>
						<div class="cover" data-id="{{ $value.id }}" style="min-height: {{ $value.width*9/16 }}px;">
							<img class="cover" src="img/grey-back.png" data-src="{{ $value.cover }}" onload="load(this)" />
							<img class="play" src="img/icon_play.png" />
						</div>
						<div class="video">
							<video id="video-{{ $value.id }}" data-src="{{ $value.url }}" webkit-playsinline width="1" height="1" class="vplayinside notaplink" x-webkit-airplay controls loop="loop"></video>
						</div>
						<div class="info" data-role="frame" data-id="{{ $value.id }}">
							<p class="title">{{ $value.title }}</p>
							<div class="rect"><span></span></div>
							<div class="text">
								<p>{{ $value.text }}</p>
							</div>
						</div>
					</div>
					{{ else if $value.style=='nine' }}
					<div class="frame nine" data-role="frame" data-id="{{ $value.id }}" data-cover="{{ $value.cover }}" data-name="{{ $value.title }}" data-author="{{ $value.meta_data.author }}" data-avatar="{{ $value.meta_data.avatarUrl }}">
						<div class="author" data-url="{{ $value.url }}">
							<p>
								<img src="{{ $value.meta_data.avatarUrl }}" data-src="{{ $value.meta_data.avatarUrl }}" />
								<span class="name">{{ $value.meta_data.author }}</span>
							</p>
						</div>
						<div class="imgs" style="min-height: {{ $value.width }}px;">
							{{ each $value.imgs.slice(0,9) as img img_index }} {{ if $value.gif_tags[img_index] }}
							<div class="img-box gif">
								<img style="min-height: {{ $value.width/3 }}px;" src="img/grey-back.png" data-src="{{ img }}!nine" onload="load(this)" />
							</div>
							{{ else if $value.long_tags[img_index] }}
							<div class="img-box long">
								<img style="min-height: {{ $value.width/3 }}px;" src="img/grey-back.png" data-src="{{ img }}!nine" onload="load(this)" />
							</div>
							{{ else }}
							<div class="img-box">
								<img style="min-height: {{ $value.width/3 }}px;" src="img/grey-back.png" data-src="{{ img }}!nine" onload="load(this)" />
							</div>
							{{ /if }} {{ /each }}
						</div>
						<div class="info" data-id="{{ $value.id }}">
							<p class="title">{{ $value.title }}</p>
							<div class="rect"><span></span></div>
							<div class="text">
								<p>{{ $value.text }}</p>
							</div>
						</div>
					</div>
					{{ /if }} {{ /if }} {{ /each }}
				</div>
			</div>
			</div>
		</script>

		<div id="share" class="mui-popover mui-popover-action mui-popover-bottom">
			<img data-id="sinaweibo" data-type="sinaweibo" src="img/share_weibo.png" />
			<img data-id="qq" data-type="qq" src="img/share_qq.png" />
			<img data-id="weixin" data-type="weixin-session" src="img/share_weixin.png" />
			<img data-id="weixin" data-type="weixin-timeline" src="img/share_timeline.png" />
		</div>

		<script src="js/template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/md5.min.js"></script>
		<script src="js/imgload.js"></script>
		<script src="js/swiper.min.js" type="text/javascript"></script>
		<script src="js/iscroll.js"></script>
		<script src="js/av-mini-1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lunar.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/daily.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>